<template>
  <div class="pool">
    <el-card shadow="never">
      <el-row>
        <el-col :span="6" class="name">奖金池</el-col>
        <el-col :span="12">
          <el-row class="fund">{{ raised }} 元</el-row>
        </el-col>
        <!-- <el-col>{{ this.detail.already_raised }}</el-col> -->
        <el-col :span="6" class="link">
          <a :href="URL" target="_blank">追加</a>
        </el-col>
      </el-row>
    </el-card>
    <el-row class="tip">前三名依次可获得：{{ first }}，{{ second }}，{{ third }} 元</el-row>
  </div>
</template>

<script>
import fund from "../utils/fund";
import { round } from "../utils/tools";
import { setInterval } from "timers";
export default {
  props: ["pool"],
  data() {
    return {
      raised: 0,
      backers: 0,
    };
  },
  computed: {
    first() {
      return round(this.raised * 0.58, 2);
    },
    second() {
      return round(this.raised * 0.3, 2);
    },
    third() {
      return round(this.raised - this.first - this.second, 2);
    },
    URL() {
      return fund.getFundURL(this.pool.type, this.pool.id);
    },
  },
  mounted() {
    this.loadPool();
    setInterval(this.loadPool, 20000);
  },
  methods: {
    loadPool() {
      fund.getFundDetail(this.pool.type, this.pool.id).then(detail => {
        this.raised = detail.raised;
        this.backers = detail.backers;
      });
    },
  },
};
</script>

<style scoped>
.name {
  font-size: 2em;
  font-weight: bold;
  /* margin-top: 0.25em; */
  text-align: justify;
}

.fund {
  height: 1em;
  font-size: 1.5em;
  margin-top: 0.25em;
}

.tip {
  font-size: 1em;
  text-align: center;
}
.link a {
  font-size: 2em;
  /* margin-top: 0.em; */
  color: whitesmoke;
  text-decoration: none;
}
</style>
